<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="物料编号:" prop="material_id">
        <el-input v-model="form.material_id" clearable placeholder="物料编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query" :loading="loading">{{
          t("common.queryText")
        }}</el-button>
        <!-- <el-button type='primary' @click='output' :loading='downloading'>{{t('common.export')}}</el-button> -->
        <el-button type="success" @click="addForm">{{
          t("common.add")
        }}</el-button>
      </el-form-item>
    </el-form>
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
      @command="handleAction"
    >
      <template #inventory_id="{ row }">{{
        row.inventory.inventory_name
      }}</template>
      <template #material_id="{ row }">{{
        row.material.material_name
      }}</template>
    </hcTable>
    <addAndEdit :options="editOption" @closeDialog="closeDialog" />
  </div>
</template>
<script setup>
import { reactive } from "vue";
import addAndEdit from "./dialog/addAndEdit.vue";
import useQueryTable from "@/hooks/useQueryTable";
import { useI18n } from "vue-i18n";
let { t } = useI18n();

let form = reactive({
  material_id: "",
});

let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  {
    prop: "inventory_id",
    label: "仓库名称",
    align: "center",
    slot: "inventory_id",
  },
  {
    prop: "material_id",
    label: "物料名称",
    align: "center",
    slot: "material_id",
  },
  { prop: "onhand_quantity", label: "库存数量", align: "center" },

  {
    width: "120",
    label: t("common.operate"),
    align: "center",
    buttons: [
      {
        name: t("common.edit"),
        type: "warning",
        command: "edit",
      },
      {
        name: t("common.delText"),
        type: "danger",
        command: "delete",
      },
    ],
  },
];

let {
  list,
  query,
  output,
  addForm,
  options,
  loading,
  editOption,
  downloading,
  closeDialog,
  handleAction,
  handlerPageSize,
  handlerPageIndex,
} = useQueryTable(
  { get: "/AvpOnhand/GetPageList", del: "/AvpOnhand/Delete" },
  form
);
</script>
<style lang="scss" scoped></style>
